<script setup>
import axios from 'axios';
import { ref, reactive } from 'vue';
import useUser from '../store/user';
import { ElMessage } from 'element-plus'

const obj = ref({
	num: null,
	password: null
});

const user = useUser();

const login = () => {
	axios({
		method: "POST",
		url: "/api/employee/login",
		data: obj.value
	}).then((resp) => {
		localStorage.setItem("token", resp.data.data.token);
		user.login(resp.data.data.isAdmin);
	}).catch((e) => {
		ElMessage.error("编号或密码错误!");
		console.log("出现异常:", e);
	});

}

</script>

<template>
	<div class="body">
		<!-- <div class="wrapper"> -->
			<!-- <div class="left">
			</div> -->
			<main>
				<div>
					<span>员工编号:</span>
					<el-input v-model="obj.num" @keyup.enter.native="login"></el-input>
				</div>
				<div>
					<span>密码:</span>
					<el-input v-model="obj.password" type="password" @keyup.enter.native="login"></el-input>
				</div>
				<div>
					<el-button @click="login">登录</el-button>
				</div>
			</main>
		</div>

	<!-- </div> -->
</template>

<style scoped>
.body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	background-image: url(/img/5.jpg);
	background-size: 100% 100%;
}

/* .wrapper {
	display: flex;
	flex: 0 0 auto;
} */

/* .left {
	width: 150px;
	height: 178px;
	background-image: url(../img/2.jpg);
	background-size: 100% 100%;
} */

main{
	padding: 50px;
	background-image: url(/img/1.jpg);
	background-size: 100% 100%;
}

main>div {
	margin: 10px 5px;
}
</style>